{% extends 'IcsocUIBundle::page.html.twig' %}
{% block content %}
    <div class="col-sm-12 widget-container-col ui-sortable" style="min-height: 108.777777671814px;">
        <div class="widget-box" style="opacity: 1; z-index: 0;">
            <div class="widget-body">
                <div class="widget-main padding-6">
                    {% if isEnableGroup %}
                        <div class="row" style="margin:1px;">
                            <input type="radio" name="monitor_type" id="monitor_type1" value="0" onclick="cache =1" checked><label for="monitor_type1">按技能组</label>
                            <input type="radio"  name="monitor_type" id="monitor_type2" value="1" onclick="cache =1" ><label for="monitor_type2">按业务组</label>
                        </div>
                    {% endif %}
                    <div class="row" style="margin:1px;">
                        <div class="progress" style="height:80px">
                           {# <div class="progress-bar progress-bar-info bar-text" style="width: 11%">
                                <span class="sr-only">35% Complete (success)</span>
                                <span>IVR进线数</span><br>
                                <span class="num-text" id="ivr_num">0</span>
                            </div>
                            <div class="progress-bar progress-bar-danger bar-text" style="width: 11%">
                                <span class="sr-only">10% Complete (danger)</span>
                                <span>IVR放弃数</span><br>
                                <span class="num-text" id="ivr_lost_num">0</span>
                            </div>
                            <div class="progress-bar progress-bar-purple bar-text" style="width: 11%">
                                <span class="sr-only">20% Complete (warning)</span>
                                <span>人工进线数</span><br>
                                <span class="num-text" id="in_num">0</span>
                            </div>
                            <div class="progress-bar progress-bar-success bar-text" style="width: 11%">
                                <span class="sr-only">35% Complete (success)</span>
                                <span>人工放弃数</span><br>
                                <span class="num-text" id="lost_num">0</span>
                            </div>
                            <div class="progress-bar progress-bar-yellow bar-text" style="width: 11%">
                                <span class="sr-only">20% Complete (warning)</span>
                                <span>人工放弃率</span><br>
                                <span class="num-text" id="lost_rate">0</span>
                            </div>#}
                            <div class="progress-bar progress-bar-pink bar-text" style="width: 11%">
                                <span class="sr-only">10% Complete (danger)</span>
                                <span>排队数</span><br>
                                <span class="num-text" id="queue">0</span>
                            </div>
                            <div class="progress-bar progress-bar-info bar-text" style="width: 20%">
                                <span class="sr-only">35% Complete (success)</span>
                                <span>技能组来电量</span><br>
                                <span class="num-text" id="queue_in_num">0</span>
                            </div>
                            <div class="progress-bar progress-bar-danger bar-text" style="width: 17%">
                                <span class="sr-only">10% Complete (danger)</span>
                                <span>接通量</span><br>
                                <span class="num-text" id="conn_num">0</span>
                            </div>
                            <div class="progress-bar progress-bar-purple bar-text" style="width: 17%">
                                <span class="sr-only">20% Complete (warning)</span>
                                <span>接通率</span><br>
                                <span class="num-text" id="conn_rate">0%</span>
                            </div>
                            {#{% for key,conn_num in connNums %}#}
                                {#<div class="progress-bar progress-bar-violet{{ key }} bar-text" style="width: 11%">#}
                                    {#<span class="sr-only">10% Complete (danger)</span>#}
                                    {#<span>{{ conn_num }}S接通率</span><br>#}
                                    {#<span class="num-text" id="conn_rate{{ conn_num }}">0</span>#}
                                {#</div>#}
                            {#{% endfor %}#}
                        </div>
                    </div>
                    <div class="row" style="margin:1px;">
                        <div id="strip_monitor" class="progress" style="height:50px"></div>
                    </div>

                    <div class="row" style="margin-right:0px;">
                        <div class="col-md-12" id="agent_monitor"></div>
                    </div>
                    <input type="hidden" id="monitor_type_h" value="0">
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block footer %}
    {% stylesheets '@IcsocUIBundle/Resources/public/css/bootstrap.my.css' filter='cssrewrite' %}
         <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
    <style>
        .btn-text {
            margin: 1px;
            padding: 1px;
            color: #272727 !important;
            width:73px;
            height:65px;
        }
        .bar-text {
            font:  180% Arial; color:#272727 !important;
            padding-top: 10px; padding-bottom: 20px;

        }
        .num-text {
            font:  200% Arial; color:#272727 !important;
            padding-top: 10px; padding-bottom: 20px;

        }
        table{
            font-size: 12px;
        }
    </style>
    <script>
        var cache = 0;
        //初始化页面数据
        $(document).ready(function() {
            /**
             * 设置监控页面布局
             * @type {number}
             */
            var with_sty = Math.floor(100/$(".progress").children().length);
            $.each($(".progress").children(),function(){
                $(this).css('width',with_sty+'%');
            });
            refresh_data();
            refresh_strip();
            refresh_ivr();
            window.setInterval(refresh_time, 1000);
            window.setInterval(refresh_strip, 5000);
            window.setInterval(refresh_data, 5000);
            window.setInterval(refresh_ivr, 60000);

            $("input[name='monitor_type']").on("change",function(){
                cache = 1;
            });
        });
        //动态刷新数据
        function refresh_data()
        {
            var monitor_type = 0;
            {% if isEnableGroup %}
                monitor_type =  $("input:radio[name='monitor_type']:checked").val();
            {% endif %}
            $.ajax({
                url:'{{ path('icsoc_monitor_agent_monitor_data') }}?monitor_type='+monitor_type+'&t={{ rand }}'+'&cache='+cache,
                dataType:'json',
                cache:false,
                success:function (responce) {
                    cache = 0;
                    if($("#monitor_type_h").val() != responce.monitor_type)
                    {
                        $("#monitor_type_h").val(responce.monitor_type);
                        $("#agent_monitor").children().remove();
                    }
                    $.each(responce.rows,function(index,data){
                        if($("#panel_"+data.id).length > 0)
                        {
                            $.each(data.children,function(index,d){

                                $("#"+data.id+"btn_"+ d.ag_id).parent().attr('sort', d.sort);

                                if(d.type == 3)//删除
                                {
                                    $("#"+data.id+"btn_"+ d.ag_id).parent().remove();
                                }
                                else if(d.type == 2)//添加
                                {
                                    $("#"+data.id+"btn_"+ d.ag_id).parent().remove();
                                    $("#panel_"+data.id).children(".panel-body").append(create_btn(d,data.id));
                                }
                                else if(d.type == 1)//修改
                                {
                                    var _tmp = "";
                                    _tmp += "<table><tbody>";
                                    _tmp += "    <tr><td>" +d.ag_name+"</td></tr>";
                                    _tmp += "    <tr><td>" +d.status+"</td></tr>";
                                    _tmp += "    <tr><td class='secs' data='"+d.ag_sta_time+"'>" +d.status_secs+"</td></tr>";
                                    _tmp += "</tbody></table>";

                                    $("#"+data.id+"btn_"+d.ag_id).html(_tmp);
                                    $("#"+data.id+"btn_"+d.ag_id).attr('class',"btn "+ d.style+" btn-text");
                                }
                                else
                                {
                                    $("#"+data.id+"btn_"+ d.ag_id).parent().remove();
                                    $("#panel_"+data.id).children(".panel-body").append(create_btn(d,data.id));
                                }
                            })
                        }
                        else
                        {
                            create_panel(data);
                        }

                        if($("#panel_"+data.id).children(".panel-body").children().length <= 0 )
                        {
                            $("#panel_"+data.id).remove();
                        }

                        var div = $('#panel_'+data.id+' .panel-body span').toArray().sort(function(a,b){
                            return parseInt($(a).attr('sort')) - parseInt($(b).attr('sort'))
                        });
                        $(div).appendTo('#panel_'+data.id+' .panel-body');
                    })
                }
            });

        }
        function create_panel(data)
        {
            var _str = "";
            _str += "<div id='panel_"+data.id+"' class=\"panel panel-info\">";
            _str += "   <div class=\"panel-heading\">"+data.name+"</div>";
            _str += "       <div class=\"panel-body\" style=\"padding: 2px;\">";

            $.each(data.children,function(index,d){
                _str +=  create_btn(d,data.id);
            });
            _str += "</div></div>";

            $("#agent_monitor").append(_str);

            var div = $('#panel_'+data.id+' .panel-body span').toArray().sort(function(a,b){
                return parseInt($(a).attr('sort')) - parseInt($(b).attr('sort'))
            });
            $(div).appendTo('#panel_'+data.id+' .panel-body');
        }
        function create_btn(d,id)
        {
            var _strr = "";
            _strr += "<span sort='"+d.sort+"'><button id='"+id+"btn_"+d.ag_id+"' type=\"button\" class=\"btn "+d.style+" btn-text\">";
            _strr += "   <table><tbody>";
            _strr += "       <tr><td>" +d.ag_name+"</td></tr>";
            _strr += "       <tr><td>" +d.status+"</td></tr>";
            _strr += "       <tr><td class='secs' data='"+d.ag_sta_time+"'>" +d.status_secs+"</td></tr>";
            _strr +=  "  </tbody></table>";
            _strr += "</button></span>";

            return _strr;
        }
        function refresh_strip()
        {
            $.ajax({
                url:'{{ path('icsoc_monitor_agent_strip_monitor_data') }}',
                dataType:'json',
                cache:false,
                success:function(responce){
                    var tmp = '';
                    $.each(responce.data,function(index,data){
                        tmp += '<div class="progress-bar '+data.style+' bar-text" style="width:'+data.rate+'">';
                        tmp +=  '<span class="sr-only">35% Complete (success) </span>';
                        tmp += '<span>'+data.num+'</span>';
                        tmp +='</div>';
                    });
                    $("#strip_monitor").html(tmp);
                    //更新排队数
                    $('#queue').text(responce.queue);
                },
                error:function (responce) {
                    window.parent.location.reload();
                }
            });
        }

        function refresh_ivr()
        {
            $.ajax({
                url:'{{ path('icsoc_monitor_agent_ivr_monitor_data') }}',
                dataType:'json',
                cache:false,
                success:function(responce){
                    $.each(responce,function(index,data){
                        $("#"+index).html(data);
                    });
                }
            });
        }
        //刷新时间
        function  refresh_time()
        {
            $('.secs').each(function(){
                var secs = parseInt($(this).attr("data"));
                secs++;
                $(this).html(formate_time(secs));
                $(this).attr("data",secs);
            });
        }
        //格式化时间
        function formate_time(dur)
        {
            if(dur < 0)
            {
                return '';
            }
            else
            {
                var hour   = parseInt(dur/3600);

                dur    = dur%3600;
                var minute = parseInt(dur/60);
                var second = dur%60;
                if(hour < 10)
                {
                    hour = "0"+hour;
                }
                if(minute < 10)
                {
                    minute = "0"+minute;
                }
                if(second < 10)
                {
                    second = "0"+second;
                }

                var format_dur = hour+":"+minute+":"+second;
                return format_dur;
            }
        }
        function switchRefresh(second, obj)
        {
            $("#btnSecond").text($(obj).text());
        }
    </script>
{% endblock %}